<template>
  <div>
    <h1>hello,world</h1>
    <p v-text="name"></p>
    <p>{{ age }}</p>
    <p v-html="info"></p>

    <p v-bind:data="dataValue">我有属性data</p>
    <p class="text" :class="{ 'red': isRed }">我是红色的</p>
    <p v-if="isFalse">我是if存在</p>
    <p v-show="isFalse">我是show存在</p>

    <p v-if="isFalse">if</p>
    <p v-else>else</p>

    <ui v-for="(item, index) in list" :key="index">
      <li>
        学生姓名：{{ item.username }}
        年龄：{{ item.age }}
      </li>
    </ui>


  </div>
</template>

<script>
import { reactive, toRefs } from "vue"
export default {
  name: "home",
  setup() {
    // create beforecreate
    const data = reactive({
      name: "小红",
      age: 19,
      info: "<i>我是斜体字</i>",
      dataValue: 20,
      isRed: true,
      isTrue: true,
      isFalse: false,
      list: [
        {
          username: "小红",
          age: 10
        },
        {
          username: "小红1",
          age: 32
        },
        {
          username: "小红2",
          age: 43
        },
        {
          username: "小红3",
          age: 12
        },
        {
          username: "小红4",
          age: 54
        },
        {
          username: "小红5",
          age: 12
        },
      ]
    })
    return {
      ...toRefs(data)
    }
  }
}
</script>

<style>
.red {
  color: red
}
</style>
